<template>
<div>
  <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px">
    <el-breadcrumb-item :to="{ path: '/' }">后台管理</el-breadcrumb-item>
    <el-breadcrumb-item>用户反馈列表</el-breadcrumb-item>
  </el-breadcrumb>
  <el-divider></el-divider>

  <el-table
      :data="tableData"
      border
      style="width: 100%">
    <el-table-column prop="id" label="ID" align="center"></el-table-column>
    <el-table-column prop="type" label="反馈类型" align="center">
      <template slot-scope="scope">
        <div>
          {{getType(scope.row)}}
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="orderSn" label="订单号" width="170px" align="center"></el-table-column>
    <el-table-column prop="username" label="反馈人"  align="center"></el-table-column>
    <el-table-column prop="message" label="反馈信息" align="center"></el-table-column>
    <el-table-column prop="status" label="反馈状态" align="center">
      <template slot-scope="scope">
        <div>
          {{getStatus(scope.row)}}
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="staffName" label="处理人" align="center"></el-table-column>


    <el-table-column label="操作" width="130" align="center">
      <template slot-scope="scope">
        <el-button type="primary" icon="el-icon-loading" circle size="mini"
                   @click.stop="setProcess(scope.row)"></el-button>
        <el-button type="danger" icon="el-icon-success" circle size="mini"
                   @click.stop="setComplete(scope.row)"></el-button>
        <el-button type="success" icon="el-icon-delete" circle size="mini"
                   @click.stop="openDeleteConfirm(scope.row)"></el-button>
      </template>

    </el-table-column>
  </el-table>
</div>

</template>

<script>
export default {
  name: "FeedbackListView",
  data() {
    return {
      tableData: [],
    }
  },
  methods:{
    setProcess(feedback){
      if(feedback.status==3){
        this.$message.error("该反馈已处理完成,不能设置为处理中");
        return;
      }
      this.$confirm('此操作将ID为【' + feedback.id + '】的反馈标记为处理中，是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let url = 'http://localhost:9080/feedbacks/' + feedback.id + '/process';
        this.axios
            .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
            .post(url).then((response) => {
          if (response.data.state != 20000) {
            this.$message.error(response.data.message);
          }
          if (response.data.state == 20000 || response.data.state == 40400) {
            this.loadFeedbackList();
          }
        })
      }).catch(() => {
      });
    },
    setComplete(feedback){
      this.$confirm('此操作将ID为【' + feedback.id + '】的反馈标记为处理完成，是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let url = 'http://localhost:9080/feedbacks/' + feedback.id + '/update';
        this.axios
            .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
            .post(url).then((response) => {
          if (response.data.state != 20000) {
            this.$message.error(response.data.message);
          }
          if (response.data.state == 20000 || response.data.state == 40400) {
            this.loadFeedbackList();
          }
        })
      }).catch(() => {
      });
    },
    getType(feedback){
      if(feedback.type==1){
        return "订单反馈"
      }else if(feedback.type==2){
        return "意见反馈"
      }else if(feedback.type==3){
        return "Bug反馈"
      }
    },
    getStatus(feedback){
      if(feedback.status==1){
        return "等待处理"
      }else if(feedback.status==2){
        return "处理中"
      }else if(feedback.status==3){
        return "处理完毕"
      }
    },
    loadFeedbackList() {
      console.log('在localStorage中的JWT数据：' + localStorage.getItem('jwt'));
      let url = 'http://localhost:9080/feedbacks';
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response) => {
        console.log(response.data.data);
        this.tableData = response.data.data;
      })
    },
    openDeleteConfirm(feedback) {
      this.$confirm('此操作将永久删除ID为【' + feedback.id + '】反馈，是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.handleDelete(feedback.id);
      }).catch(() => {
      });
    },
    handleDelete(id) {
      let url = 'http://localhost:9080/feedbacks/' + id + '/delete';
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .post(url).then((response) => {
        if (response.data.state == 20000 || response.data.state == 40400) {
          this.loadFeedbackList();
        }
        if (response.data.state != 20000) {
          this.$message.error(response.data.message);
        }
      })
    },
  },
  mounted() {
    this.loadFeedbackList();
  }
}
</script>

<style scoped>

</style>
